<template>
	<view class="tabBar safe-area">
		<view class="flex align-center">
			<block v-for="(item, index) in list" :key="index">
				<navigator
					hover-class="none"
					class="item-content flex column just-center align-center"
					:url="item.path"
					open-type="redirect"
				>
					<view class="box flex just-center">
						<image v-if="current == index" :src="item.select" />
						<image v-else :src="item.icon" />
					</view>

					<view
						class="f-22"
						:class="current == index ? 'select' : 'normal'"
					>
						{{ item.title }}
					</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				list: [
					{
						title: "首页",
						path: "/subPages/technician/tabBar/home",
						icon: "/static/technician/tabBar/home_tabBar_normal.png",
						select: "/static/technician/tabBar/home_tabBar_select.png",
					},
					{
						title: "订单",
						path: "/subPages/technician/tabBar/orderList",
						icon: "/static/technician/tabBar/order_tabBar_normal.png",
						select: "/static/technician/tabBar/order_tabBar_select.png",
					},
					{
						title: "我的",
						path: "/subPages/technician/tabBar/mine",
						icon: "/static/technician/tabBar/mine_tabBar_normal.png",
						select: "/static/technician/tabBar/mine_tabBar_select.png",
					},
				],
			};
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.tabBar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: white;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		> view {
			width: 100%;
			height: 100rpx;
			overflow: hidden;

			.item-content {
				flex: 1;
				height: 100%;

				.box {
					padding-bottom: 6rpx;

					> image {
						width: 48rpx;
						height: 48rpx;
						display: block;
					}
				}
			}
		}
	}

	.select {
		color: $tab-select-color;
	}

	.normal {
		color: $tab-normal-color;
	}
</style>
